<template>
	<div class="promoteData">
		<HeaderTop :title="`推广数据`"></HeaderTop>
		<div class="promoteData-content">
			<div class="promoteData-title">
				<div class="promoteData-title-left" style="text-align: center">推广链接</div>
				<div class="promoteData-title-right" style="margin-right: .2rem">操作</div>
			</div>
			<div class="promoteData-title promoteData-content-list" v-for="(item,index) in urls" v-if="item.urlstatus === true">
				<div class="promoteData-title-left" :id="'urlAdress' + index">{{item.agenturl}}</div>
				<div class="promoteData-title-right copy-btn" @click="copyUrl(index)" :id="'copyBtn' + index">复制链接</div>
			</div>
			
		</div>
		<input id="copy_content" type="text" value="" style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;" readonly/>
		
	</div>
</template>

<script>
import HeaderTop from '../../components/top/top';
export default {
	name: 'promoteData',
	components: {
		HeaderTop,
	},
	data() {
		return {
			urls:[],
		}
	},
	mounted() {
		this.urlLinks();
	},
	methods: {
		urlLinks() {
			this.ServerAPI.postAPI(this.API.urlLinks, '', (success,data)=>{
				if(success){
					if(data.code === '0000'){
						this.urls = data.data
					}
				}
			})
		},
		copyUrl(index) {
			var clickContent = document.getElementById('urlAdress'+index).innerHTML
			var inputElement = document.getElementById('copy_content')
			inputElement.value = clickContent
			inputElement.select()
			document.execCommand('Copy')
			var copyBtns = document.getElementsByClassName('copy-btn')
			for (let i=0;i<copyBtns.length;i++){
				copyBtns[i].innerHTML = '复制链接'
			}
			document.getElementById('copyBtn'+index).innerHTML = '已复制'
		},
	}
}
</script>

<style lang="scss" scoped>
.promoteData-content {
	padding: .3rem.2rem 0;
	text-align: center;
	.promoteData-title {
		background: rgb(229,229,229);
		height: 1rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.promoteData-title-left {
			width: 60%;
			text-align: left;
		}
		.promoteData-title-right {
			width: 20%;
		}
	}
	.promoteData-content-list {
		background: #FFFFFF;
		font-size: .28rem;
		border-bottom: rgb(229,229,229) 1px solid;
		padding: 0 .2rem;
		.promoteData-title-left {
			color: rgb(77,76,76);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.promoteData-title-right {
			color: rgb(0,138,255);
		}
	}
}


</style>
